<template>
    <div>
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right" style="padding-left: 10px;padding-bottom: 10px;font-size: 12px;">
            <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>挂号预约</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/register'}">快速挂号</el-breadcrumb-item>
            <el-breadcrumb-item>选择医生</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card style="">
            <h2><span style="color :#4cd5e7">{{tableData[0].departmentName}}</span>共有<span style="color :#4cd5e7">{{tableData.length}}</span>位医生</h2>
            <el-divider></el-divider>
            
                <el-table
                    :data="tableData"
                    border
                    style="width: 100%; ">
                    <el-table-column
                    fixed
                    prop="departmentName"
                    label="科室"
                    width="120">
                     <template slot-scope="scope">
                            <el-tag type="" closable v-text="scope.row.departmentName"></el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                    prop="userName"
                    label="姓名"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    prop="type"
                    label="级别"
                    width="100">
                    <template slot-scope="scope">
                            <el-tag type="danger" effect="plain" v-if="scope.row.type==1">专家</el-tag>
                            <el-tag type="success" effect="plain" v-if="scope.row.type==0">普通</el-tag>
                           
                    </template>
                    </el-table-column>
                    <el-table-column
                    prop="age"
                    label="年龄"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    prop="avatar"
                    label="头像"
                    width="150">
                    <template slot-scope="scope">
                            <el-popover placement="right" trigger="hover">
                                <img :src="scope.row.avatar"
                                     style="height: 150px;width: 120px"/>
                                <img slot="reference" :src="scope.row.avatar"
                                     :alt="scope.row.imgUrl" style="height: 100px;width: 80px;cursor: pointer">
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column
                    prop="appointment"
                    label="会诊时间"
                    width="200">
                    <template slot-scope="scope">
                        <el-tag type="warning" closable v-text="scope.row.appointment"></el-tag>
                    </template>
                    </el-table-column>

                    <el-table-column
                    prop="place"
                    label="问诊地点"
                    width="150">
                    <template slot-scope="scope">
                        <span ><i class="el-icon-location"></i>{{scope.row.place}}</span>
                    </template>
                    </el-table-column>
                    <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                        <el-button @click="register(scope.row)" type="text" size="small">挂号</el-button>
                    </template>
                    </el-table-column>
                </el-table>
            
        </el-card>
        <!-- 挂号弹出框 -->
        <el-dialog
        title="挂号"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose">
        <el-row :gutter="20">
             <el-col :span="18">
                <h1>您选择了<span style="color :#4cd5e7; margin-top:50px">{{departmentName}}</span>的<span style="color :#4cd5e7">{{name}}</span>医师</h1>
                <p>现在有<span style="color: #FF5151; font-size:4.5mm">{{number}}</span>人预约了这位医生</p>
                 <p>若继续预约，请您支付
                    <el-tag type="danger" effect="plain" v-if="type==1">30元</el-tag>
                    <el-tag type="success" effect="plain" v-if="type==0">18元</el-tag>
                 挂号费</p>
             </el-col>
             <el-col :span="6">
                 <img :src="avatar" alt="" width="120px" height="150px" style="margin-right: 20px">
             </el-col>
        </el-row>
                <el-divider></el-divider>
                <div>
                <img src="../../assets/img/zfb3.png" alt="" width="101px" height="100px">
                <!-- <span style="color :#4cd5e7; font-weight: 500;margin-top: 100px" >←支付宝支付 微信支付→</span> -->
                <img src="../../assets/img/vx3.png" alt="" width="101px" height="100px" style="margin-left:25px">
                </div>
                 <span style="color :#2894FF;margin-right: 80px;margin-left:29px">支付宝</span>
                 <span style="color :#02C874;">微信支付</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="open">确 定</el-button>
        </span>
        </el-dialog>

        <!-- 医生信息介绍 -->
        <el-drawer
        :title="name"
        :visible.sync="drawer"
        :direction="direction"
        :before-close="handleClose">
        <el-row :gutter="20">
                  <el-col :span="6">
                    <div class="left1">
                      <img :src="avatar" alt="" width="80px" height="100px" style="margin-left: 20px">
                    </div>
                  </el-col>
                  <el-col :span="18">
                    <div class=" ">
                      <!-- <el-tag type="success" effect="dark">医院等级</el-tag> -->
                      <span style="color: #888888" class="tap">级别</span>
                      <el-tag type="danger" effect="plain" v-if="type==1">专家</el-tag>
                      <el-tag type="success" effect="plain" v-if="type==0">普通</el-tag>
                      <span style="color: #888888" class="tap">挂号费</span>
                      <el-tag type="danger" effect="plain" v-if="type==1">30元</el-tag>
                      <el-tag type="success" effect="plain" v-if="type==0">18元</el-tag>
                    </div>
                    <p class="tap"><span style="color: #888888" >问诊地点:</span><i class="el-icon-location"></i><span>{{place}}</span></p>
                  </el-col>
                </el-row>
                <el-divider></el-divider>
                 <h1 class="title">个人简介</h1>
                <p class="content">{{ introduction}}</p>
                <el-divider></el-divider>
                 <h1 class="title">医疗特长</h1>
                <p class="content">{{ speciality}}</p>
               
        </el-drawer>
    </div>   
</template>

<script>
import {store} from '../../store/index'
import {saveRegistration} from '../../api/users'
import {getUserInfo} from '../../api/login'
import {getNum} from '../../api/users'
export default {
    // components:{Fee},
    name: 'Doctor',
    data() {
        return {
        tableData: [],
        drawer: false,
        direction: 'rtl',
        dialogVisible: false,
        name:'',
        type:'',
        introduction:'',
        speciality:'',
        avatar:'',
        row: '',
        phone:'',
        place:'',
        departmentName:'',
        number: '',
        registration: {
          userName:'',
          doctorName: '',
          doctorId: '',
          type: '',
          age: '',
          departmentName: '',
          date: '',
          userId: '',
          gender: '',
          place:'',
        },
      }
        
    },
    methods: {
      handleClick(row) {
        this.name = row.userName+"医师";
        this.type = row.type;
        this.introduction = row.introduction;
        this.speciality = row.speciality;
        this.avatar = row.avatar;
        this.drawer = true;
        this.phone = row.phone;
        this.place = row.place;

        console.log(row);
      },

     async open() {
        this.dialogVisible = false;
        const h = this.$createElement;
        console.log(this.registration);

        const res = await saveRegistration(this.registration);
        console.log(res)
        //if(res.code == )
        this.$notify({
          title: '支付成功！',
          message: h('i', { style: 'color: #4cd5e7'}, '您的预约请求正在处理中，请耐心等待……'),
          type: 'success'
        });
      },
      cancel() {
          this.dialogVisible = false;
          this.$notify({
          title: '取消成功！',
          message: '您已经取消支付',
          type: 'warning'
        });

      },

      async getUserInfo() {
                console.log("加载用户信息.........");
               
                const res = await getUserInfo();
                console.log(res);
                
                this.registration.userName = res.data.data.userInfo.userName;
                this.registration.userId = res.data.data.userInfo.userId;
                this.registration.age = res.data.data.userInfo.age;
                this.registration.gender = res.data.data.userInfo.gender;
                
            },
      
      // 挂号
     async register(row) {
        const res = await getNum(row.userId);
        console.log(res)
        this.number =res.data.data.count;
        this.name = row.userName;
        this.type = row.type;
        this.introduction = row.introduction;
        this.speciality = row.speciality;
        this.avatar = row.avatar;
        this.phone = row.phone;
        this.departmentName = row.departmentName;
        this.registration.doctorName = row.userName;
        this.registration.doctorId = row.userId;
        this.registration.type = row.type;
        this.registration.departmentName = row.departmentName;
        this.registration.departmentId = row.departmentId;
        this.registration.date = row.appointment;
        this.registration.place = row.place;
        this.dialogVisible = true;
      },
      handleClose(done) {
          done();
        // this.$confirm('确认关闭？')
        //   .then(_ => {
        //     done();
        //   })
        //   .catch(_ => {});
      },
      
   
    },
    created() {
      this.tableData = this.$store.state.doctors_name_res
      this.getUserInfo();
      console.log('table',this.tableData);
    }
}
</script>

<style>
.tap{
    margin-left: 15px;
    margin-right: 5px;

}

.title{
    margin-left: 15px;
    font-size: 4mm;
    font-weight: 800;
}

.content{
    margin-left: 15px;
    font-size: 3.5mm;
}

.el-drawer.rtl{
    overflow-y: auto;
}

.el-drawer.rtl ::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

</style>